import React, { useState,useEffect } from "react";
import axios   from 'axios';

//‌useEffect‌ 是 React 16.8 版本引入的一个钩子函数，用于在函数组件中执行副作用操作。
// 副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作 DOM等.

//useEffect接受两个参数：一个是副作用函数，另一个是依赖数组。
function App() {
  const [list, setlist] = useState([]);

// 执行一次副作用操作：如果依赖数组为空，副作用函数只会在组件首次渲染时执行一次。
  useEffect(() => {
    axios({
      method:"GET",
      url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=715684",
      headers:{
        "X-Host":"mall.film-ticket.film.list"
      }
    }).then(response=>{
      console.log(response);
      setlist(response.data.data.films);
    });
  }, []); // 传空数组，

  useEffect(() => {
    // axios.get()
  }, []);

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li key={item.filmId}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;